import type {SortableOptions} from 'sortablejs';
import type Sortable from 'sortablejs';

function useSortable<T extends HTMLElement>(
    sortableContainer: T,
    options: SortableOptions = {},
) {
    const initializeSortable = async () => {
        const Sortable = await import(
            // @ts-expect-error - This is a dynamic import
            'sortablejs/modular/sortable.complete.esm.js'
            );
        const sortable = Sortable?.default?.create?.(sortableContainer, {
            animation: 300,
            delay: 400,
            delayOnTouchOnly: true,
            ...options,
        });
        return sortable as Sortable;
    };

    return {
        initializeSortable,
    };
}

export {useSortable};

export type {Sortable};
